<div style="display:flex;margin-bottom:10px;margin-left:25px;margin-right:25px;">
  <div style="padding-top: 10px;">
    <mat-icon style="padding-top: 3px;">search</mat-icon>
    <h4 style="display: inline;position: relative;top: -5px;">
      <ng-container i18n>
        Search Results
      </ng-container>
    </h4>
  </div>
  <div style="flex: 1 1 auto"></div>
  <div>
    <app-controls></app-controls>
  </div>
</div>

<div style="display: flex; flex-direction: column;margin-right:10px;margin-left:10px;">
  <div style="display: flex; flex-direction: row">
    <mat-form-field floatLabel="never" style="flex: 0 1 500px; margin-left: 10px">
      <input #searchText matInput placeholder="Enter text to find services">
    </mat-form-field>
    <button mat-button (click)="doSearch(searchText.value)">Search</button>
  </div>
</div>

<div style="display: flex; flex-direction: column;margin-right:10px;margin-left:10px;">
  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef [ngClass]="'actionWidth'">
        <ng-container i18n>
          &nbsp;
        </ng-container>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="'actionWidth'">
        <button mat-icon-button [matMenuTriggerFor]="serviceMenu" (click)="selectedItem = row">
          <mat-icon>menu</mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'statusWidth'">
        <ng-container i18n>Status</ng-container>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="'statusWidth'">
        <span *ngIf="added(row)" style="color:green;">A</span>
        <span *ngIf="modified(row)" style="color:blue;">M</span>
        <span *ngIf="deleted(row)" style="color:red;">D</span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'nameWidth'">
        <ng-container i18n>
          Name
        </ng-container>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="'nameWidth'">
        <a (click)="serviceEdit(row)">
          {{ row.name }}
        </a>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="serviceId">
      <mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'serviceIdWidth'">
        <ng-container i18n>
          Service Url
        </ng-container>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="'serviceIdWidth'">
        {{ row.serviceId }}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'descriptionWidth'">
        <ng-container i18n>
          Description
        </ng-container>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="'descriptionWidth'">
        {{ row.description }}
      </mat-cell>
    </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <app-paginator></app-paginator>
</div>

<mat-menu #serviceMenu>
  <button mat-menu-item (click)="serviceEdit()">
    <mat-icon>edit</mat-icon>
    <ng-container i18n="management.services.table.button.edit">
      {{ messages.management_services_table_button_edit }}
    </ng-container>
  </button>
  <button mat-menu-item (click)="viewYaml()">
    <mat-icon>code</mat-icon>
    <ng-container i18n>YAML</ng-container>
  </button>
  <button mat-menu-item (click)="viewJson()">
    <mat-icon>code</mat-icon>
    <ng-container i18n>JSON</ng-container>
  </button>
</mat-menu>
